<template>
  <div id="vue-pdf-view">
    <div id="page-view">
      <el-button type="primary" size="default" @click="PDFPrint"
        style="margin-right: 100%;margin-bottom: 10px;">打印</el-button>
      <hr>
      <Pagination :total="pdfState.numPages" :pageSize="1" @CurrentChange="CurrentChange"></Pagination>
      <!-- 一页一页展示 -->
      <vue-pdf-embed :source="pdfState.pdfSource" :page="pdfState.pageNum" textLayer ref="vuePdfRef" />
      <!-- 全展示 -->
      <!-- <vue-pdf-embed :source="pdfState.pdfSource" textLayer ref="vuePdfRef" v-for="page in pdfState.numPages"
        :key="page" /> -->
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import VuePdfEmbed from "vue-pdf-embed";
// 导入自己的文件
const pdfState = reactive({
  pdfSource: {
    url: `${import.meta.env.BASE_URL}lw.pdf`,
    cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.9.359/cmaps/',
    cMapPacked: true,
  },
  // 当前页
  pageNum: 1,
  // 总页数
  numPages: 1,
})
//获取总页码
onMounted(async () => {
  const doc = await VuePdfEmbed.getDocument(pdfState.pdfSource).promise
  // 获取文件总页数
  // console.log(doc.numPages);
  pdfState.numPages = doc.numPages
})
//当前页
const CurrentChange = (page) => {
  pdfState.pageNum = page
}
const vuePdfRef = ref(null);
// -- 获取文件名(用于 文件打印和下载)--
function getPDFFileName() {
  const last_index = pdfState.pdfSource.url.lastIndexOf('/');
  return pdfState.pdfSource.url.slice(last_index + 1);
}
// -- pdf文件打印 --
function PDFPrint() {
  vuePdfRef.value.print(300, getPDFFileName(), true);
}

</script>
<style>
#vue-pdf-view {
  width: 100%;
  height: 100%;
  text-align: center;

  /* 内容溢出显示滚动条 */
  overflow: scroll;
  /* 隐藏x、y轴滚动条 */
  overflow-y: hidden;
  overflow-x: hidden;
}

/* 设置滚动栏的宽、高 */
#vue-pdf-view::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 设置滚动条的样式 */
#vue-pdf-view::-webkit-scrollbar-thumb {
  border-radius: 15px;
  background-color: #eee;
}

/* 鼠标经过滚动条变换颜色 */
#vue-pdf-view::-webkit-scrollbar-thumb:hover {
  background-color: #CBCBFF;
}
</style>